<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .picker-slot {
            font-size: 15px !important;
        }
    </style>
    <script>
        document.getElementsByTagName('html')[0].style.fontSize = '15px'
    </script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/icon.css">
    <link rel="stylesheet" href="./css/mint.min.css">
    <title>手术查询</title>
</head>
<body>
<div class="bgcolor" id="app">
    <div class="flexHC bgwhite padding5 fixed">
        <div class="width15 height15 base64_ic_time_bottom marginR10"></div>
        <span class="font13 blue" @click="clickDateTime(stDateTime)">{{stDateTime}}</span>
        <span class="font13 padding10">至</span>
        <span class="font13 blue" @click="clickDateTime(endDateTime)">{{endDateTime}}</span>
    </div>
    <div class="line"></div>
    <div class="page-navbar marginT40">
        <mt-navbar class="page-part fixed flexHC" v-model="selected">
            <template v-for="(itm,idx)  in opListTab">
                <mt-tab-item :id="idx">
                    <div class="font15">{{itm}}</div>
                </mt-tab-item>
            </template>
        </mt-navbar>

        <mt-tab-container v-model="selected">
            <template v-for="(itm,idx) in opListTab">
                <mt-tab-container-item class="marginT50" :id="idx">
                    <div class="bgwhite padding8 margin5 radius5" v-for="(itm2,idx2) in opList[idx]"
                         :key="itm2.opApplyid">
                        <div class="font12 marginT5">{{itm2.patinfo}}</div>
                        <div class="font15 fontBold marginT5">{{itm2.opnName}}</div>
                        <div class="font12 marginT5 flexHL">
                            <div :class="getState(itm2.state)">{{itm2.state}}</div>
                            {{"     手术医生：" + itm2.opDoctor }}
                        </div>
                        <div class="font12 marginT5">{{"申请时间：" + itm2.applyTime + "   " + itm2.opRoom }}</div>
                    </div>
                </mt-tab-container-item>
            </template>
        </mt-tab-container>
    </div>

    <mt-datetime-picker ref="picker" type="datetime"
                        year-format="{value}年"
                        month-format="{value}月"
                        date-format="{value}日"
                        hour-format="{value}时"
                        minute-format="{value}分"
                        v-model="pickerTime" @confirm="handleConfirm"/>

</div>
</body>

<!-- 先引入 Vue -->
<script src="js/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="js/mint.min.js"></script>
<script src="js/webservice.js"></script>
<!-- 测试数据 -->
<script src='mock/GetOperationListTest.js'></script>

<script>

    var tag = ""
    var tUserId = "1885";
    var tLocId = "8";
    var tWardId = "3";
    function getString(s) {
        if (tag == "USERID") {
            tUserId = s;
            getSPString("LOCID") //第2个调用
        } else if (tag == "LOCID") {
            tLocId = s;
            getSPString("WARDID") //第3个调用
        } else if (tag == "WARDID") {
            tWardId = s;
        }
    }
    function getSPString(key) {
        if (window.android) {
            tag = key;
            window.android.callAndroid("com.blankj.utilcode.util.SPStaticUtils:getString(" + key + ")", "call");
        }
    }
    //第1个调用
    getSPString("USERID")
    //添加鸿蒙 传递用户信息
    window.addEventListener('message', function (event) {
        if (event.data === 'init_web_messageport') {
            if (event.ports[0] != null) {
                h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口
                h5Port.onmessage = function (event) {
                    var result = event.data;// 2. 接收ets侧发送过来的消息.
                    console.log("In html got message, result: ", (result));
                    if (typeof (result) == "string") {
                        //固定格式：hospitalId,groupId,wardId,userId,locId
                        var arr = result.split(",");
                        tHospitalId = arr[0];
                        tGroupId = arr[1];
                        tWardId = arr[2];
                        tUserId = arr[3];
                        tLocId = arr[4];
                        var txt = tHospitalId + "-" + tGroupId + "-" + tWardId + "-" + tUserId + "-" + tLocId
                        //document.getElementById("msg").innerHTML = "String:" + result + "=" + txt
                        initVue();
                    }
                }
            }
        }
    })

    function initVue() {
        new Vue({
            el: '#app',
            data: {
                pickerTime: "2023-04-27 13:13",
                stDateTime: "2023-04-27 13:13",
                endDateTime: "2023-04-28 13:13",
                tag: "start",
                selected: 0,
                opList: [],
                opListTab: [],
            },
            watch: {
                selected(val) {
                    console.log(val + "-" + this.selected)
                }
            },
            mounted() {
                //将要给原生调用的方法挂载到 window 上面
                window.Config = this.Config
                window.getScanMsg = this.getScanMsg
                window.Logon = this.Logon
                window.GetOperationList = this.GetOperationList
                var font = getComputedStyle(window.document.documentElement)['font-size']
                console.log("font=" + font)
                this.initData()
            },
            methods: {
                //获取扫码
                getScanMsg(scanInfo) {
                    this.$toast(scanInfo)
                },
                GetOperationList(data) {
                    this.doGetOperationList(data)
                },
                Logon(data) {
                    this.$toast(data)
                },
                doGetOperationList(data) {
                    Http.hideLoading(this)
                    console.log(data)
                    this.opListTab = []
                    this.opList = []
                    var tmpList = data.opList
                    for (let i = 0; i < tmpList.length; i++) {
                        var state = tmpList[i].state
                        if (!state) {
                            state = "其他";
                        }
                        if (this.opListTab.indexOf(tmpList[i].state) == -1) {
                            this.opListTab.push(tmpList[i].state)
                        }
                    }
                    for (let i = 0; i < this.opListTab.length; i++) {
                        var tState = this.opListTab[i];
                        var tmpTab = [];
                        for (let j = 0; j < tmpList.length; j++) {
                            var state = tmpList[j].state
                            if (tState == state) {
                                tmpTab.push(tmpList[j])
                            }
                        }
                        console.log(tState)
                        console.log(tmpTab)
                        this.opList.push(tmpTab)
                    }
                },
                getState(sate) {
                    if (sate == "安排") {
                        return "green marginR10"
                    }
                    if (sate == "申请") {
                        return "blue marginR10"
                    }
                    if (sate == "拒绝") {
                        return "red marginR10"
                    }
                    return "black marginR10";
                },
                clickDateTime(tag) {
                    this.tag = tag
                    this.pickerTime = tag
                    this.$refs.picker.open();
                },
                handleConfirm(val) {
                    console.log(val)
                    if (val instanceof Object) {
                        var dt = this.getDt(val);
                        if (this.tag == this.stDateTime) this.stDateTime = dt
                        if (this.tag == this.endDateTime) this.endDateTime = dt
                        this.initData()
                    }
                },
                initData() {
                    var startDate = this.stDateTime.split(" ")[0]
                    var startTime = this.stDateTime.split(" ")[1]
                    var endDate = this.endDateTime.split(" ")[0]
                    var endTime = this.endDateTime.split(" ")[1]
                    Http.showLoading(this)
                    var params = {
                        wardId: "3",
                        startDate: startDate,
                        startTime: startTime,
                        endDate: endDate,
                        endTime: endTime
                    };
                    Http.postPlus("GetOperationList", params, (data) => {
                        console.log(GetOperationListTest)
                        this.doGetOperationList(GetOperationListTest);
                    })
                    this.selected = 0
                    console.log(this.opList)
                },
                getDt(val) {
                    var month = val.getMonth() + 1;
                    if (month < 10) month = '0' + month;
                    var day = val.getDate();
                    if (day < 10) day = '0' + day;
                    var dt = val.getFullYear() + "-" + month + "-" + day + " " + val.getHours() + ":" + val.getMinutes()
                    return dt
                }
            }
        })
    }
    var ua = navigator.userAgent
    if (ua.includes("OpenHarmony") || ua.includes("Linux")) {
        //鸿蒙不处理
    } else if (ua.includes("Mozilla") || ua.includes("AppleWebKit") || ua.includes("Safari") || ua.includes("Chrome") || ua.includes("Edg")) {
        initVue() //浏览器 直接打开
    }
</script>
</html>